
{% if section.settings.collection.id %}
  {% get_collection collections_id={section.settings.collection.id} %}
  {% assign collection = collection  %}
{% endif %}
{% assign data = section.settings %}
<div class="block_collection_slides">
  <div class="{% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
    <div class="{% if section.settings.is_hr %}show_hr{% endif %}">
      {% include 'title', title: data.title,detaile: data.detail,textAlgin: data.text_align %}
      <div class="block_collection_product">
        <div class="block_collection_product_content" id="block_collection_{{ block_id | default : section.block_id  }}">
          <ul class="swiper-wrapper">
            {% if section.settings.collection.id %}
              {% get_products collection_id={section.settings.collection.id} limit={ section.settings.product_number } %}
              {% for product in products %}
                <li class="swiper-slide">
                  {% include 'collection_product' , collection_handle:collection.handle %}
                </li>
              {% endfor %}
            {% else %}
              {% for i in (1..4) %}
                <li class="swiper-slide">
                  <div class="product_pic">
                    <a href="javascript:;">
						{% include 'lazy_img' %}
					</a>
                    {% if product.inventory_tracking %}
                      {% if product.inventory_quantity == "0" %}
                        <div class="soldout">{{ lang.general.sold_out }}</div>
                      {% endif %}
                    {% endif %}
                    <div class="discount_tag {{ theme_config.global.discount_label_style }}">
                      <div class="discount_tag_graphics"></div>
                      <div class="discount_tag_name">88%
                        <span>OFF</span>
                      </div>
                    </div>
                  </div>
                  <div class="product_name">
                    <a href="javascript:;">title</a>
                  </div>
                  <div class="product_price general_buying-color">$88.00<span class="product_oldprice general_original-color">$88.00</span>
                  </div>
                </li>
              {% endfor %}
            {% endif %}
          </ul>
        </div>
        <div class="prev" id="prev_{{ block_id | default : section.block_id  }}">{% include 'icon_silde_left' ,{width:'24',height:'24'} %}</div>
        <div class="next" id="next_{{ block_id | default : section.block_id  }}">{% include "icon_silde_right" ,{width:'24',height:'24'} %}</div>
      </div>
      {% if section.settings.more_text != ""%}
        <div class="block_collection_product_more">
          {% assign moreUrl = '/collections/' | append: collection.handle %}
          {% include 'animation_btn', text: section.settings.more_text,btnType: 'secondary_btn', url: moreUrl  %}
        </div>
      {% endif %}
    </div>
  </div>
</div>
<script type="text/javascript">
  (function() {
    let blockId = "{{ block_id | default : section.block_id }}"
    let swiper = new Swiper(`#block_collection_${blockId}`, {
      slidesPerView: {{ section.settings.pc_number }},
      spaceBetween: 30,
      navigation: {
        nextEl: `#next_${blockId}`,
        prevEl: `#prev_${blockId}`
      },
      breakpoints: {
        640: {
          slidesPerView: 2.5,
          spaceBetween: 14
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 30
        }
      }
    })
  })()
</script>
{% schema %}
{
	"tag": "",
	"class": "block_collection_slides",
	"is_global": false,
	"icon": "icon-shangpinlunbo",
	"name": {
		"zh_CN": "商品轮播",
		"en_US": "Product carousel"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "是否显示分割线",
				"en_US": "Show split line"
			},
			"default": true,
			"id": "is_hr"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "标题对齐方式",
				"en_US": "Title alignment"
			},
			"default": "center",
			"id": "text_align",
			"option": [
				{
					"value": "left",
					"label": {
						"zh_CN": "居左",
						"en_US": "To the left"
					}
				},
				{
					"value": "center",
					"label": {
						"zh_CN": "居中",
						"en_US": "In the center"
					}
				},
				{
					"value": "right",
					"label": {
						"zh_CN": "居右",
						"en_US": "To the right"
					}
				}
			]
		},
		{
			"type": "card_collection",
			"label": {
				"zh_CN": "专辑",
				"en_US": "Collection"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "collection"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": "New Arrivals"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": "bottom_center"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_fill"
		},
		{
			"type": "card_input_number",
			"label": {
				"zh_CN": "产品总数量",
				"en_US": "Total quantity of products"
			},
			"max": 1000,
			"min": 1,
			"id": "product_number",
			"default": 8
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "PC每排数量",
				"en_US": "PC number per row"
			},
			"id": "pc_number",
			"max": "5",
			"min": "3",
			"default": "3"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			},
			"id": "more_text"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"collection": {
				"id": "",
				"title": ""
			},
			"is_hr": true,
			"text_align": "left",
			"title": "Collection Slides",
			"detail": "",
			"is_fill": false,
			"product_number": "8",
			"pc_number": "3",
			"more_text": "View all"
		},
		"blocks": []
	}
}
{% endschema %}